<template>
  <el-upload class="upload-demo" :on-success="handleSuccessUpload" :before-upload="handleBeforeUpload" drag :action="baseURL + '/upload'"
    :data="state.uploadData" :on-remove="handleRemove" multiple>
    <el-icon class="el-icon--upload">
      <upload-filled />
    </el-icon>
    <div class="el-upload__text">
      拖拽文件 或者 <em>点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        <!-- jpg/png files with a size less than 500kb -->
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { baseURL } from '@/config/index'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { httpFileDelete } from '@/api/file'
import type { UploadProps, UploadUserFile } from 'element-plus'
import useCurrentInstance from "@/utils/useCurrentInstance"
const { proxy } = useCurrentInstance()

const proof = computed(() => proxy.$store.state.user.proof)
const state = reactive({
  uploadData: { proof }
})

// 上传失败
const handleSuccessUpload = (res: any)=>{
  console.log(res)
  if(res.code != 200){
    proxy.$message.error(res.message)
  }
}

const handleBeforeUpload = () => {
  // console.log(proxy.$store.state.user.token)
  // console.log(state.uploadData)
}

const handleRemove: UploadProps['onRemove'] = (file: any, uploadFiles) => {
  const { id } = file.response.data
  httpFileDelete(id).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('删除成功')
    }
  })

}
</script>
